<template>
  <div>
    <van-sticky>
      <van-nav-bar title="栏目管理" left-arrow @click-left='backOff' />
    </van-sticky>
    <van-row>
      <van-col span='24'>
        <van-button size='large' type="primary" text="显示遮罩层" @click="addCate">新增</van-button>
      </van-col>
    </van-row>
    <van-row>
      <van-col>
        <table>
          <thead>
            <tr>
              <th>栏目名称</th>
              <th>排序值</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for='item in cateList' :key='item.name'>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td><van-button @click="updateCate(item)">编辑</van-button></td>
              <td><van-button type='warning' @click='delCateItem(item.id)'>删除</van-button></td>
            </tr>
          </tbody>
        </table>
      </van-col>
    </van-row>
    <!-- 遮罩层内容 -->
    <!-- 记得在输入框中加上正则匹配 -->
    <van-overlay :show="show">
      <van-form @submit="onSubmit">
        <van-field
          v-model="cateId"
          name="id"
          label="id"
          placeholder="id"
          disabled
        />
        <van-field
          v-model="cateName"
          name="name"
          label="栏目名称"
          placeholder="栏目名称"
        />
        <van-field
          v-model="sort"
          name="sort"
          label="排序值"
          placeholder="排序值"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-overlay>
  </div>
</template>

<script>
// 后面优化的时候, 给这些单独建一个 network 文件
import { request } from 'network/request'

export default {
  name: 'Gategory',
  created() {
    this.getCateList()
  },
  data() {
    return {
      cateList: [],
      show: false,
      cateId: null,
      cateName: '',
      sort: '',
      // 决定增加还是删除, true 为增加, false 为修改
      flag: true
    }
  },
  methods: {
    backOff() {
      this.$router.go(-1)
    },
    getCateList() {
      request({
        url: 'category/data',
        method: 'post'
      }).then((res) => {this.cateList = res.data})
      .catch(err => console.log(err))
    },
    addCate() {
      this.cateId = '?'
      this.cateName = ''
      this.sort = ''
      this.show = true
      this.flag = false
      // 同样的请求转发 -- add
    },
    onSubmit(values) {
      this.show = false
      if(this.flag) {
        // 修改请求
        request({
          url: 'category/updateCate',
          method: 'post',
          params: {
            id: values['id'],
            name: values['name'],
            sort: values['sort']
          }
        }).then(() => {this.getCateList()})
        .catch(err => console.log(err))
      } else {
        // 增加请求
        if(values.name != '' && values.sort != '') {
          request({
            url: 'category/addCate',
            method: 'post',
            params: {
              name: values['name'],
              sort: values['sort']
            }
          }).then(() => {this.getCateList()})
          .catch(err => console.log(err))
          this.flag = true
        }
      }
    },
    updateCate(item) {
      this.cateId = item.id
      this.cateName = item.name
      this.sort = item.sort
      this.show = true
    },
    // 发送删除请求
    delCateItem(id) {
      this.$dialog.confirm({
        message: '是否删除该栏目',
      }).then(() => {
        request({
          url: 'category/delCate',
          method: 'post',
          params: {
            id: id
          }
        }).then(() => {this.getCateList()})
        .catch(err => console.log(err))
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
